<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>发现项目</title>

    <!-- Css (necessary Css) -->
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/bootstrap.min.css')}"
          media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/bootstrap-theme.css')}"
          media="all">
    <link rel="stylesheet"
          th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/language-selector-remove-able-css.css')}"
          media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/flexslider.css')}"
          media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/style.css')}" media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/plugin.css')}" media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/menu.css')}" media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/responsive.css')}"
          media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/color.css')}" media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/iconmoon.css')}"
          media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/themetypo.css')}"
          media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/widget.css')}" media="all">
    <link rel="icon" th:href="${@mvcResourceUrlProvider.getForLookupPath('/ep/images/favicon.ico')}"
          type="image/x-icon"/>
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/layui/css/layui.css')}" media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/ep/css/eleTree.css')}" media="all">
    <!-- jQuery (necessary JavaScript) -->
    <script type="text/javascript"
            th:src="${@mvcResourceUrlProvider.getForLookupPath('/assets/scripts/jquery.js')}"></script>
    <script type="text/javascript"
            th:src="${@mvcResourceUrlProvider.getForLookupPath('/assets/scripts/bootstrap.min.js')}"></script>
    <script type="text/javascript"
            th:src="${@mvcResourceUrlProvider.getForLookupPath('/assets/scripts/modernizr.js')}"></script>
    <script type="text/javascript"
            th:src="${@mvcResourceUrlProvider.getForLookupPath('/assets/scripts/menu.js')}"></script>
    <script type="text/javascript"
            th:src="${@mvcResourceUrlProvider.getForLookupPath('/assets/scripts/jquery.flexslider-min.js')}"></script>
    <script type="text/javascript"
            th:src="${@mvcResourceUrlProvider.getForLookupPath('/assets/scripts/functions.js')}"></script>
    <script th:src="${@mvcResourceUrlProvider.getForLookupPath('/layui/layui.js')}"></script>
    <script th:src="${@mvcResourceUrlProvider.getForLookupPath('/ep/js/common/common.js')}"></script>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

    <![endif]-->
    <style>
        .select_done {
            background: #fff;
            color: #fe6500;
            border-bottom: 3px solid #4f4a9c;
            padding: 12px 24px 9px;
        }
    </style>
</head>
<body>
<!-- Header -->
<div th:replace="../templates/ep/front/crowd/header :: main-header"></div>
<!-- Header -->
<!-- body-->
<main id="main-content">
    <div class="main-section">
        <div class="page-section">
            <div class="container">
                <div class="row">
                    <div class="section-fullwidth col-lg-12">
                        <div class="cs-content-holder">
                            <div class="row">
                                <aside class="page-sidebar col-lg-3">
                                    <div class="widget cs_directory_categories">
                                        <div class="cs-search-area">
                                            <fieldset>
                                                <label class="search">
                                                    <input id="keyWord" name="keyWord" style="color: #0C0C0C"
                                                           type="text"
                                                           placeholder="请输入关键字进行查询">
                                                    <div class="layui-btn" id="searchBtn"
                                                         style="background-color: #fe6500; margin-top: 10px;float: right">
                                                        搜索
                                                    </div>
                                                </label>
                                            </fieldset>
                                        </div>
                                        <div class="widget-section-title">
                                            <h4><i class="icon-globe4"></i>15 Diverse Categories</h4>
                                        </div>
                                        <ul class="menu">
                                        </ul>
                                    </div>
                                </aside>
                                <div class="page-content col-lg-9">
                                    <div class="row">
                                        <div class="col-lg-12 main-filter">
                                            <nav class="wow filter-nav">
                                                <!--Sorting Navigation-->
                                                <ul class="cs-filter-menu pull-left">
                                                    <li><a id="fund_begin" class="select_done">最新上线</a></li>
                                                    <li><a id="hit_times">最多点击</a></li>
                                                    <li><a id="raise_goal">最多金额</a></li>
                                                    <li><a id="fundFinish">已经完成</a></li>
                                                </ul>
                                                <!--Sorting Navigation End-->
                                                <ul class="grid-filter">
                                                    <li class="active"><a href="javascript:void(0)"><i
                                                            class="icon-layout15"></i></a></li>
                                                    <li><a href="javascript:void(0)"><i class="icon-list7"></i></a></li>
                                                </ul>
                                            </nav>
                                        </div>
                                        <div class="listing_grid">
                                        </div>
                                        <div class="col-lg-12">
                                            <nav class="pagination">
                                                <div id="pageShow"></div>
                                            </nav>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</main>
<!-- body end-->

<!--// CopyRight //-->
<div th:replace="../templates/ep/front/crowd/footer :: footer"></div>
<!--// CopyRight //-->

<script th:inline="javascript">
    layui.use(['upload', "layer", 'form', 'laypage', 'layedit'], function () {
        let ctx = [[@{/}]];
        var upload = layui.upload
            , layer = layui.layer
            , form = layui.form
            , layedit = layui.layedit
            , laypage = layui.laypage
            , currentSelect = "fund_begin";
        initMenu();
        initPageMain();
        var keyword = [[${keyWord}]];
        if (keyword != null && keyword != '') {
            $("input[name=keyWord]").val(keyword);
            $("#searchBtn").trigger("click")
        }

        // 分类菜单
        function initMenu() {
            $.ajax({
                url: "/web/common/getProjectTypeAndCount",
                type: "get",
                success: function (data) {
                    var list = data.data.data;
                    var countNum = data.data.countNum;
                    var str = "<li><a href=\"#\"><i class=\"icon-sort-amount-desc cscolor\"></i>全部</a> <span>" + countNum + "</span></li>";
                    // 分类菜单
                    $(".widget-section-title").html("<h4><i class=\"icon-globe4\"></i>" + list.length + "个类别</h4>")
                    for (var i = 0; i < list.length; i++) {
                        var jsonValue = JSON.parse(list[i].jsonValue)
                        str += "<li><a href=\"#\"><i class=\"" + jsonValue.class + "\"></i>" + list[i].name + "</a> <span>" + list[i].count + "</span></li>"
                    }
                    $(".menu").html(str);

                }
            })

        }

        //获取主要内容
        function initPageMain() {
            //分页 每页9个
            initPage(9);
        }

        //分页
        function initPage(limit) {
            let total, rows, pageIndex;
            let keyWord = $("input[name=keyWord]").val();
            let sortType = $(".cs-filter-menu").find(".select_done")[0].id;
            $.ajax({
                url: "/web/getProjectList",
                type: "get",
                data: {"pageSize": limit, "pageNum": 1, "keyWord": keyWord, "sortType": sortType},
                success: function (data) {
                    rows = data.data.rows;
                    total = data.data.total;
                    pageIndex = laypage.render({
                        elem: 'pageShow' //注意，这里的 test1 是 ID，不用加 # 号
                        , theme: '#fe6500'
                        , limit: limit
                        , groups: 5
                        , count: total //数据总数，从服务端得到
                        , jump: function (obj, first) {
                            if (!first) {
                                var pageSize = obj.limit;
                                var pageNum = obj.curr;
                                $.ajax({
                                    url: "/web/getProjectList",
                                    type: "get",
                                    data: {
                                        "pageSize": pageSize,
                                        "pageNum": pageNum,
                                        "keyWord": keyWord,
                                        "sortType": sortType
                                    },
                                    success: function (data) {
                                        rows = data.data.rows;
                                        total = data.data.total;
                                        initPageShow(rows);
                                    }
                                })
                            }
                            initPageShow(rows);
                        }
                    });

                }
            })
        }

        function initPageShow(rows) {
            var str = "";
            for (var i = 0; i < rows.length; i++) {
                str += "<article class=\"col-lg-4 col-md-4 col-sm-6\">\n" +
                    "                                                    <div class=\"directory-section\">\n" +
                    "                                                        <div class=\"cs_thumbsection\">\n" +
                    "                                                            <figure><a href=\"/web/project_info?projectId=" + rows[i].projectId + "\"><img  src=\"/" + rows[i].ad + "\" alt=\"\"></a></figure>\n" +
                    "                                                        </div>\n" +
                    "                                                        <div class=\"content_info\">\n" +
                    "                                                            <div class=\"title\">\n" +
                    "                                                                <h3><a href=\"/web/project_info?projectId=" + rows[i].projectId + "\">" + rows[i].shortTitle + "</a></h3>\n" +
                    "                                                            <div class=\"dr_info\">\n" +
                    "                                                                <ul>\n" +
                    "                                                                    <li> <i class=\"cscolor icon-target5\"></i>目标:" + rows[i].goal + "</li>\n" +
                    "                                                                    <li> <i class=\"cscolor icon-clock7\"></i>" + rows[i].fundBegin + "</li>\n" +
                    "                                                                </ul>\n" +
                    "                                                                <span class=\"bar\"><span style=\"width:" + toPercentShow(rows[i].raiseGoal, rows[i].goal) + ";\"></span></span>\n" +
                    "                                                                <div class=\"detail\"> <span class=\"fund\">" + toPercent(rows[i].raiseGoal, rows[i].goal) + "</span> <a style='cursor: pointer' id='toCollect" + rows[i].projectId + "' onclick=\"toCollection(" + rows[i].projectId + ")\" class=\"star icon-star\"></a>" +
                    "<a style='cursor: pointer' id='toDeletCollect" + rows[i].projectId + "' onclick=\"toDeletCollection(" + rows[i].projectId + ")\" class=\"star icon-star cscolor hidden\"></a> </div>\n" +
                    "                                                            </div>\n" +
                    "                                                        </div>\n" +
                    "                                                    </div>\n" +
                    "                                                </article>";
            }
            $(".listing_grid").html(str)
        }

        // 计算进度条
        function toPercentShow(num, total) {
            if (Math.round(num / total * 10000) > 10000) {
                return (100 + "%");// 小数点后两位百分比
            }
            return (Math.round(num / total * 10000) / 100.00 + "%");// 小数点后两位百分比

        }

        // 计算比例
        function toPercent(num, total) {

            return (Math.round(num / total * 10000) / 100.00 + "%");// 小数点后两位百分比

        }

        function toCollection(projectId) {
            $.ajax({
                url: "/web/saveUserCollectionProject",
                type: "post",
                data: {"projectId": projectId},
                success: function (data) {
                    if (data.code == 401) {
                        window.location.href = "/web/common/login";
                    }
                    $("#toCollect" + projectId + "").addClass("hidden")
                    $("#toDeletCollect" + projectId + "").removeClass("hidden")
                },
                error: function (data) {
                }
            })
        }

        function toDeletCollection(projectId) {
            $.ajax({
                url: "/web/deleteUserCollectionProject",
                type: "post",
                data: {"projectId": projectId},
                success: function (data) {
                    $("#toCollect" + projectId + "").removeClass("hidden")
                    $("#toDeletCollect" + projectId + "").addClass("hidden")
                }
            })
        }

        // 分类栏展示
        $(".cs-filter-menu li").click(function () {
            console.log($("#" + currentSelect + ""))
            $("#" + currentSelect + "").removeClass("select_done");
            $(this).find("a").addClass("select_done");
            currentSelect = $(this).find("a")[0].id;
            initPage();

        })

        // 关键字搜索
        $("#searchBtn").click(function () {
            initPage();
        })
    });
    function toCollection(projectId) {
        $.ajax({
            url: "/web/saveUserCollectionProject",
            type: "post",
            data: {"projectId": projectId},
            success: function (data) {
                if (data.code == 401) {
                    window.location.href = "/web/common/login";
                }
                $("#toCollect" + projectId + "").addClass("hidden")
                $("#toDeletCollect" + projectId + "").removeClass("hidden")
            },
            error: function (data) {
            }
        })
    }

    function toDeletCollection(projectId) {
        $.ajax({
            url: "/web/deleteUserCollectionProject",
            type: "post",
            data: {"projectId": projectId},
            success: function (data) {
                $("#toCollect" + projectId + "").removeClass("hidden")
                $("#toDeletCollect" + projectId + "").addClass("hidden")
            }
        })
    }
</script>
</body>
</html>